$def with (goals)

$# Renders a collection of reading goals progress components.
$#
$# goals : list[YearlyGoal] : Chronological list of yearly goal dictionaries
$# YearlyGoal.year : int : The year this goal was set
$# YearlyGoal.goal : int : The amount of books desired to be read
$# YearlyGoal.books_read : int : The amount of books finished this year
$# YearlyGoal.progress : int : Percent of goal achieved

<div class="reading-goal-progress-container">
  $for goal in goals:
  <div class="reading-goal-progress">
    <div class="reading-goal-progress__body">
      <div class="reading-goal-progress__progress-bar">
        $ completed = 100 if goal.progress > 100 else goal.progress
        <span class="reading-goal-progress__completed" style="width: $(completed)%;"></span>
      </div>
      <div class="reading-goal-progress__details">
          <a href="/account/books/already-read/year/$(goal.year)" data-ol-link-track="ReadingGoalProgress|AnnualSummaryLink">$:_('<span class="reading-goal-progress__books-read">%(books_read)d</span>/<span class="reading-goal-progress__goal">%(goal)d</span> Books', books_read=goal.books_read, goal=goal.goal)</a>
          <a class="edit-reading-goal-link" href="javascript:;">$_('Edit')</a>
      </div>
      $ reading_goal_form = render_template('check_ins/reading_goal_form', goal=goal.goal, year=goal.year, update=True)
      $ id = 'yearly-goal-modal-%d' % loop.index
      $ title = _('Edit %(year)d Reading Goal', year=goal.year)
      $:render_template('native_dialog', id, reading_goal_form, title=title)
    </div>
  </div>
</div>
